<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
  <meta charset='UTF-8'>	
  <title>Lobby page</title>
  <link rel='stylesheet' href='css/style.css' />	
  <link rel='stylesheet' href='css/popup.css' /> 
  <link rel='stylesheet' href='css/chat.css' />
   
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src='js/jquery.color-RGBa-patch.js'></script>
  <script src='js/example.js'></script>
  <script src='js/jquery.utilities.js'></script>
  <script src='js/jquery.lobby.js'></script>
  <script type="text/javascript">
  $(document).ready(function() {
    // $("#popupBackground").click(function(){disablePopup();});
    $("textarea").focus();
    postChat("chatNotice", "Comments will be posted here!");
    postChat("randomBold", "Comments will be posted here!");
    
    //checkUsername();
    checkPlayingStatus();
    // Keep updating top lists and chat
    updateLists();
    getAllMessages();
  });

</script>
</head>

<body>
  <div id="popupBackground"></div>
  <div class="popup" id="statuspopup"></div>
  
	<table style="margin-left: auto; margin-right: auto; width:800px">
		<tr>
    		<td>
            	<table>
					<tr>
    					<td><img src="img/lobby_welcome.png" alt="battleships_lobby_icon" /></td>
					</tr>
				</table>
                
   <table id="navbar" style="width:100%; height:50px;">
  	 <tr>
      	<td>
          <div class="nav-wrap">   
            <ul class="group" id="menu_bar">
                <li><a rel="#fe4902" href="index.html">Home</a></li>
                <li><a rel="#A41322" onclick="newGamePopup()">Start Battle</a></li>
                <li><a rel="#C6AA01" href="javascript:window.open('rules.html','Site','width=800,height=600 scrollbars=1')">Rules</a></li>
                <li class="current_page_item_two"><a rel="#900" href="javascript:openWindow('settings.html','Site','width=800,height=600 scrollbars=1')">Settings</a></li>
                <li><a rel="#D40229" href="javascript:window.open('Help.html','Site','width=800,height=600 scrollbars=1')">Help</a></li>
                <li><a rel="#98CEAA" href="authors.html">About Our Project</a></li>
                <li><a rel="#1B9B93" href="javascript:window.open('donate.html','Site','width=800,height=600 scrollbars=1')">Donate</a></li>
                <li><a rel="#8DC91E" href="#">Exit</a></li>
            </ul>
          </div>		
        </td>
      </tr>
    </table> 
                
    <table id="contentT">
      <tr>
       	<td id="chatTD">
          <h1>Chat</h1>
          <div id="chat"></div>
          <div id="message">
         	<label for="chatMessages"></label><textarea id="chatMessages" label="Chat message" rows="1" cols="34" maxlength="70" onkeypress="return isNotMax(event,this)" ></textarea></label>
          </div>
        </td>
        <td>
        <table id="topPlayersT">
        <tr>
          <td>
            <h1>Top players</h1>
            <ol id="topPlayers"></ol>
            ${FBUserName}
          </td>
        </tr>
        <tr>
          <td>
            <h1>Active games</h1>
            <ul id="activeGames"></ul>
          </td>  
        </tr>
        <tr>
          <td>
            <h1>Past games</h1>
            <ul id="pastGames"></ul>
          </td>
        </tr>
        <tr>
          <td>
            <h1>Authorize</h1>
            <p align="center"><a href="Avaleht">Link here</a></p>
          </td>
        </tr>
        </table> 
        </td>
      </tr>
    </table>
                  
            </td>
   		</tr>
   </table>
   
</body>

</html>